<template>
    <div class="work-order">
        <!-- 页面标题和操作按钮 -->
        <div class="page-header">
            <div class="header-title">
                <h2>工单管理</h2>
                <p>管理和跟踪生产工单的执行状态</p>
            </div>
            <div class="header-actions">
                <el-button type="primary" @click="handleAdd">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    创建工单
                </el-button>
            </div>
        </div>

        <!-- 搜索和筛选 -->
        <el-card class="search-card" shadow="never">
            <el-form :model="searchForm" :inline="true" class="search-form">
                <el-form-item label="工单号">
                    <el-input v-model="searchForm.orderNo" placeholder="请输入工单号" clearable />
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-input v-model="searchForm.productName" placeholder="请输入产品名称" clearable />
                </el-form-item>
                <el-form-item label="工单状态">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
                        <el-option label="未开始" value="not_started" />
                        <el-option label="进行中" value="in_progress" />
                        <el-option label="已完成" value="completed" />
                        <el-option label="已暂停" value="paused" />
                        <el-option label="已取消" value="cancelled" />
                    </el-select>
                </el-form-item>
                <el-form-item label="负责人">
                    <el-input v-model="searchForm.assignee" placeholder="请输入负责人" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">
                        <el-icon>
                            <Search />
                        </el-icon>
                        搜索
                    </el-button>
                    <el-button @click="handleReset">
                        <el-icon>
                            <Refresh />
                        </el-icon>
                        重置
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 工单状态统计 -->
        <div class="stats-section">
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-card class="stat-card">
                        <div class="stat-content">
                            <div class="stat-number">{{ stats.total }}</div>
                            <div class="stat-label">总工单数</div>
                        </div>
                        <el-icon class="stat-icon" color="#909399">
                            <Document />
                        </el-icon>
                    </el-card>
                </el-col>
                <el-col :span="4">
                    <el-card class="stat-card">
                        <div class="stat-content">
                            <div class="stat-number">{{ stats.notStarted }}</div>
                            <div class="stat-label">未开始</div>
                        </div>
                        <el-icon class="stat-icon" color="#409EFF">
                            <Clock />
                        </el-icon>
                    </el-card>
                </el-col>
                <el-col :span="4">
                    <el-card class="stat-card">
                        <div class="stat-content">
                            <div class="stat-number">{{ stats.inProgress }}</div>
                            <div class="stat-label">进行中</div>
                        </div>
                        <el-icon class="stat-icon" color="#E6A23C">
                            <Timer />
                        </el-icon>
                    </el-card>
                </el-col>
                <el-col :span="4">
                    <el-card class="stat-card">
                        <div class="stat-content">
                            <div class="stat-number">{{ stats.completed }}</div>
                            <div class="stat-label">已完成</div>
                        </div>
                        <el-icon class="stat-icon" color="#67C23A">
                            <CircleCheck />
                        </el-icon>
                    </el-card>
                </el-col>
                <el-col :span="4">
                    <el-card class="stat-card">
                        <div class="stat-content">
                            <div class="stat-number">{{ stats.paused }}</div>
                            <div class="stat-label">已暂停</div>
                        </div>
                        <el-icon class="stat-icon" color="#F56C6C">
                            <VideoPause />
                        </el-icon>
                    </el-card>
                </el-col>
                <el-col :span="4">
                    <el-card class="stat-card">
                        <div class="stat-content">
                            <div class="stat-number">{{ stats.cancelled }}</div>
                            <div class="stat-label">已取消</div>
                        </div>
                        <el-icon class="stat-icon" color="#C0C4CC">
                            <Close />
                        </el-icon>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 工单列表 -->
        <el-card class="table-card" shadow="never">
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="orderNo" label="工单号" width="130" />
                <el-table-column prop="productName" label="产品名称" width="150" />
                <el-table-column prop="productModel" label="产品型号" width="120" />
                <el-table-column prop="planQuantity" label="计划数量" width="100" align="right">
                    <template #default="scope">
                        {{ scope.row.planQuantity.toLocaleString() }}
                    </template>
                </el-table-column>
                <el-table-column prop="completedQuantity" label="完成数量" width="100" align="right">
                    <template #default="scope">
                        {{ scope.row.completedQuantity.toLocaleString() }}
                    </template>
                </el-table-column>
                <el-table-column label="完成率" width="120">
                    <template #default="scope">
                        <el-progress
                            :percentage="Math.round((scope.row.completedQuantity / scope.row.planQuantity) * 100)"
                            :color="getProgressColor(scope.row.completedQuantity / scope.row.planQuantity)" />
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                        <el-tag :type="getStatusType(scope.row.status)">
                            {{ getStatusText(scope.row.status) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="assignee" label="负责人" width="100" />
                <el-table-column prop="startTime" label="开始时间" width="150" />
                <el-table-column prop="endTime" label="预计完成" width="150" />
                <el-table-column label="操作" width="250" fixed="right">
                    <template #default="scope">
                        <el-button v-if="scope.row.status === 'not_started'" type="success" size="small"
                            @click="handleStart(scope.row)">
                            开始
                        </el-button>
                        <el-button v-if="scope.row.status === 'in_progress'" type="warning" size="small"
                            @click="handlePause(scope.row)">
                            暂停
                        </el-button>
                        <el-button v-if="scope.row.status === 'paused'" type="success" size="small"
                            @click="handleResume(scope.row)">
                            恢复
                        </el-button>
                        <el-button v-if="['not_started', 'in_progress', 'paused'].includes(scope.row.status)"
                            type="primary" size="small" @click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="info" size="small" @click="handleView(scope.row)">
                            详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-wrapper">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import {
    Plus,
    Search,
    Refresh,
    Document,
    Clock,
    Timer,
    CircleCheck,
    VideoPause,
    Close
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索表单
const searchForm = reactive({
    orderNo: '',
    productName: '',
    status: '',
    assignee: ''
})

// 统计数据
const stats = reactive({
    total: 89,
    notStarted: 15,
    inProgress: 28,
    completed: 32,
    paused: 8,
    cancelled: 6
})

// 表格数据
const tableData = ref([
    {
        id: 1,
        orderNo: 'WO202401001',
        productName: '智能手机A1',
        productModel: 'SM-A1-128G',
        planQuantity: 1000,
        completedQuantity: 680,
        status: 'in_progress',
        assignee: '张三',
        startTime: '2024-01-15 08:00:00',
        endTime: '2024-01-18 18:00:00'
    },
    {
        id: 2,
        orderNo: 'WO202401002',
        productName: '平板电脑B2',
        productModel: 'TB-B2-64G',
        planQuantity: 500,
        completedQuantity: 500,
        status: 'completed',
        assignee: '李四',
        startTime: '2024-01-10 08:00:00',
        endTime: '2024-01-15 18:00:00'
    },
    {
        id: 3,
        orderNo: 'WO202401003',
        productName: '智能手表C3',
        productModel: 'SW-C3-BT',
        planQuantity: 800,
        completedQuantity: 0,
        status: 'not_started',
        assignee: '王五',
        startTime: '2024-01-20 08:00:00',
        endTime: '2024-01-25 18:00:00'
    },
    {
        id: 4,
        orderNo: 'WO202401004',
        productName: '蓝牙耳机D4',
        productModel: 'BH-D4-Pro',
        planQuantity: 1200,
        completedQuantity: 300,
        status: 'paused',
        assignee: '赵六',
        startTime: '2024-01-12 08:00:00',
        endTime: '2024-01-22 18:00:00'
    }
])

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(89)

// 获取状态类型
const getStatusType = (status: string) => {
    const typeMap: Record<string, string> = {
        not_started: 'info',
        in_progress: 'warning',
        completed: 'success',
        paused: 'danger',
        cancelled: ''
    }
    return typeMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status: string) => {
    const textMap: Record<string, string> = {
        not_started: '未开始',
        in_progress: '进行中',
        completed: '已完成',
        paused: '已暂停',
        cancelled: '已取消'
    }
    return textMap[status] || '未知'
}

// 获取进度条颜色
const getProgressColor = (percentage: number) => {
    if (percentage < 0.3) return '#f56c6c'
    if (percentage < 0.7) return '#e6a23c'
    return '#67c23a'
}

// 处理搜索
const handleSearch = () => {
    console.log('搜索条件:', searchForm)
    ElMessage.success('搜索完成')
}

// 处理重置
const handleReset = () => {
    Object.assign(searchForm, {
        orderNo: '',
        productName: '',
        status: '',
        assignee: ''
    })
    ElMessage.success('重置完成')
}

// 处理新增
const handleAdd = () => {
    console.log('创建工单')
    ElMessage.info('打开创建工单对话框')
}

// 处理开始工单
const handleStart = (row: any) => {
    ElMessageBox.confirm(
        `确认开始工单 "${row.orderNo}" 吗？`,
        '确认开始',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        row.status = 'in_progress'
        ElMessage.success('工单已开始')
    }).catch(() => {
        ElMessage.info('已取消操作')
    })
}

// 处理暂停工单
const handlePause = (row: any) => {
    ElMessageBox.confirm(
        `确认暂停工单 "${row.orderNo}" 吗？`,
        '确认暂停',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        row.status = 'paused'
        ElMessage.success('工单已暂停')
    }).catch(() => {
        ElMessage.info('已取消操作')
    })
}

// 处理恢复工单
const handleResume = (row: any) => {
    ElMessageBox.confirm(
        `确认恢复工单 "${row.orderNo}" 吗？`,
        '确认恢复',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        row.status = 'in_progress'
        ElMessage.success('工单已恢复')
    }).catch(() => {
        ElMessage.info('已取消操作')
    })
}

// 处理编辑
const handleEdit = (row: any) => {
    console.log('编辑:', row)
    ElMessage.info(`编辑工单: ${row.orderNo}`)
}

// 处理查看
const handleView = (row: any) => {
    console.log('查看:', row)
    ElMessage.info(`查看工单详情: ${row.orderNo}`)
}

// 处理页码变化
const handleCurrentChange = (page: number) => {
    currentPage.value = page
    console.log('当前页:', page)
}

// 处理每页条数变化
const handleSizeChange = (size: number) => {
    pageSize.value = size
    console.log('每页条数:', size)
}

onMounted(() => {
    console.log('工单管理页面已加载')
})
</script>

<style scoped>
.work-order {
    padding: 0;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.header-title h2 {
    margin: 0 0 5px 0;
    color: #303133;
    font-size: 24px;
    font-weight: 600;
}

.header-title p {
    margin: 0;
    color: #909399;
    font-size: 14px;
}

.search-card {
    margin-bottom: 20px;
}

.search-form {
    margin-bottom: 0;
}

.stats-section {
    margin-bottom: 20px;
}

.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-card :deep(.el-card__body) {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 32px;
    font-weight: 600;
    color: #303133;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 14px;
    color: #909399;
}

.stat-icon {
    font-size: 40px;
    opacity: 0.8;
}

.table-card {
    margin-bottom: 0;
}

.pagination-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
</style>
